<template>
  <h2>sum：{{ sum }}</h2>
  <br />
  <button type="" @click="sum++">点击+1</button>
</template>

<script>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";

export default {
  name: "Demo",
  setup() {
    let sum = ref(0);

    console.log("~~~setup~~~");
    // setup(){} 就是组合式Api中的beforeCreate + created

    // 通过组合式Api形式使用生命周期
    onBeforeMount(() => {
      console.log("~~~onBeforeMount~~~");
    });
    onMounted(() => {
      console.log("~~~onMounted~~~");
    });
    onBeforeUpdate(() => {
      console.log("~~~onBeforeUpdate~~~");
    });
    onUpdated(() => {
      console.log("~~~onUpdated~~~");
    });
    onBeforeUnmount(() => {
      console.log("~~~onBeforeUnmount~~~");
    });
    onUnmounted(() => {
      console.log("~~~onUnmounted~~~");
    });

    return {
      sum,
    };
  },

  //通过配置项形式使用生命周期
  //#region
  /* beforeCreate() {
    console.log("---beforeCreate---");
  },
  created() {
    console.log("---created---");
  },
  beforeMount() {
    console.log("---beforeMount---");
  },
  mounted() {
    console.log("---beforeMount---");
  },
  beforeUpdate() {
    console.log("---beforeUpdate---");
  },
  updated() {
    console.log("---updated---");
  },
  beforeUnmount() {
    console.log("---beforeUnmount---");
  },
  unmounted() {
    console.log("---unmounted---");
  }, */
  //#endRegion
};
</script>
